<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加菜品</title>
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" href="../../static/layui/css/layui.css"
          media="all"/>
    <style>
        body {
            margin: 10px;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form layui-form-pane" action="" lay-filter="component-form-element">
            <div class="layui-form-item">
                <!--隐藏域-->
                <div class="layui-input-block layui-hide">
                    <input type="text" name="goodsId" th:value="${goods.goodsId}" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <label class="layui-form-label">菜品名称</label>
                        <div class="layui-input-block">
                            <input type="text" th:value="${goods.goodsName}" name="goodsName" id="goodsName"
                                   lay-verify="required" placeholder="菜名"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <label class="layui-form-label">菜品类型</label>
                        <div class="layui-input-block">
                            <select name="categoryId">
                                <th:block th:each="goodsCategory:${goodsCategoryList}">
                                    <th:block th:if="${goodsCategory.categoryId} eq ${goods.goodsCategory.categoryId}">
                                        <option th:value="${goodsCategory.categoryId}"
                                                th:text="${goodsCategory.categoryName}" selected></option>
                                    </th:block>
                                    <th:block th:if="${goodsCategory.categoryId} neq ${goods.goodsCategory.categoryId}">
                                        <option th:value="${goodsCategory.categoryId}"
                                                th:text="${goodsCategory.categoryName}"></option>
                                    </th:block>
                                </th:block>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <label class="layui-form-label">菜品成本</label>
                        <div class="layui-input-block">
                            <input type="text" th:value="${goods.cost}" name="cost"
                                   lay-verify="required|number|positive_number" placeholder="" autocomplete="off"
                                   class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <label class="layui-form-label">菜品价格</label>
                        <div class="layui-input-block">
                            <input type="text" th:value="${goods.price}" name="price"
                                   lay-verify="required|number|positive_number" placeholder="" autocomplete="off"
                                   class="layui-input"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <label class="layui-form-label">销售状态</label>
                        <div class="layui-input-block">
                            <th:block th:if="${goods.soldState}==0">
                                <input type="radio" name="soldState" value="0" title="未售完" checked>
                                <input type="radio" name="soldState" value="1" title="已售完">
                            </th:block>
                            <th:block th:if="${goods.soldState}==1">
                                <input type="radio" name="soldState" value="0" title="未售完">
                                <input type="radio" name="soldState" value="1" title="已售完" checked>
                            </th:block>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <label class="layui-form-label">上架状态</label>
                        <div class="layui-input-block">
                            <th:block th:if="${goods.putawayStatus}==0">
                                <input type="radio" name="putawayStatus" value="0" title="下架" checked>
                                <input type="radio" name="putawayStatus" value="1" title="上架">
                            </th:block>
                            <th:block th:if="${goods.putawayStatus}==1">
                                <input type="radio" name="putawayStatus" value="0" title="下架">
                                <input type="radio" name="putawayStatus" value="1" title="上架" checked>
                            </th:block>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <label class="layui-form-label">库存量</label>
                        <div class="layui-input-block">
                            <input type="text" th:value="${goods.storeCount}" name="storeCount"
                                   lay-verify="required|int_number" placeholder=""
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <label class="layui-form-label">类型状态</label>
                        <div class="layui-input-block">
                            <select name="typeState">
                                <th:block th:if="${goods.typeState}==1">
                                    <option value="1" selected>普通菜</option>
                                    <option value="2">新菜</option>
                                    <option value="3">特色菜</option>
                                </th:block>
                                <th:block th:if="${goods.typeState}==2">
                                    <option value="1">普通菜</option>
                                    <option value="2" selected>新菜</option>
                                    <option value="3">特色菜</option>
                                </th:block>
                                <th:block th:if="${goods.typeState}==3">
                                    <option value="1">普通菜</option>
                                    <option value="2">新菜</option>
                                    <option value="3" selected>特色菜</option>
                                </th:block>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-text">
                            <label class="layui-form-label">菜品描述</label>
                            <div class="layui-input-block">
                        <textarea th:text="${goods.description}" name="description" placeholder="请输入内容"
                                  lay-verify="required"
                                  class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <label class="layui-form-label">菜品照片</label>
                        <!--上传按钮-->
                        <button type="button" class="layui-btn" id="upload1">上传图片</button>
                        <!--隐藏的input-->
                        <input type="hidden" id="img_url" name="imgUrl"/>
                        <!--预览区域-->
                        <div class="layui-upload-list">
                            <th:block th:if="${goods.imgUrl}==null or ${goods.imgUrl}==''">
                                <img class="layui-upload-img" width="98px" height="132px" id="demo1"/>
                            </th:block>
                            <th:block th:if="${goods.imgUrl}!=null">
                                <div id="layer-photos-demo1" class="layer-photos-demo">
                                    <img th:attr="layer-src=@{${goods.imgUrl}},src=@{${goods.imgUrl}}"
                                         class="layui-upload-img" width="98px" height="132px" id="demo1"/>
                                </div>
                            </th:block>
                            <p id="demoText1"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="LAY-user-front-submit"
                       id="LAY-user-front-submit" value="确认">
            </div>
        </form>
    </div>
</div>
<script th:src="@{/layuiadmin/layui/layui.js}" src="../../static/layuiadmin/layui/layui.js"></script>
<script>
    layui.use(['form', 'laydate', "layer"], function () {
        var $ = layui.$
            , admin = layui.admin
            , element = layui.element
            , form = layui.form
            , laydate = layui.laydate
            , layer = layui.layer;

        //获取from表单提交事件
        //此处submit中的值是lay-filter
        form.on('submit(component-form-element)', function (data) {
        });
        //自定义验证
        form.verify({
            //验证正数
            positive_number: function (value, item) {
                if (parseFloat(value) < 0) {
                    return '必须为正数';
                }
            },
            int_number: function (value, item) {
                if (!/^(0|\+?[1-9][0-9]*)$/.test(value)) {
                    return '必须为正整数';
                }
            }
        });
        //图片弹出
        layer.photos({
            photos: '#layer-photos-demo1'
            , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
        layer.photos({
            photos: '#layer-photos-demo2'
            , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
    });
</script>
<script type="text/javascript" th:inline="javascript">
    layui.use('upload', function () {
        var upload = layui.upload
            , $ = layui.jquery;
        var uploadInst1 = upload.render({
            elem: '#upload1' //绑定元素
            , url: '/restaurant/upload/img.do'//上传接口
            , field: 'image'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code !== 200) {
                    return layer.msg('上传失败', {icon: 2, anim: 6});
                }
                //上传成功
                layer.msg("上传成功", {icon: 6});
                console.log("图片路径：" + res.data.src);
                document.getElementById("img_url").value = res.data.src;
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText1 = $('#demoText1');
                demoText1.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText1.find('.demo-reload').on('click', function () {
                    uploadInst1.upload();
                });
            }
        });
    });
</script>
</body>
</html>